<template>
  <div class="tables">
    <el-table
      ref="table"
      :data="data"
      header-cell-class-name="table-header-cell"
      row-class-name="table-row-one"
      :row-key="getRowKeys"
      :max-height="maxHeight === -1 ? 800 : maxHeight"
      :span-method="spanMethod"
      @selection-change="handleSelectionChange"
    >
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    maxHeight: {
      type: Number,
      default: -1
    },
    getRowKeys: {
      type: Function,
      default: () => {}
    },
    spanMethod: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleSelectionChange(e) {
      this.$emit("selection-change", e);
    }
  }
};
</script>

<style>
.tables > .el-table {
  border: 1px solid #ebecf0;
}
</style>
